<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
*{padding:0; margin:0}
body{font-size:12px; font-family:"微软雅黑","宋体"; color:#333;}
h1{font-size:16px; background:#ccc; padding:5px 10px; margin-bottom:15px}
.effect{ margin-bottom:15px; padding:0 10px}
.hide{display:none}
button{width:50px;}
/* Clear Fix */ 
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac \*/ 
.clearfix { display:block; }
/* End hide from IE Mac */ 
/*scroll*/
.s{ width:150px; height:50px; padding:10px; margin-bottom:10px; border:1px solid #ccc; overflow:hidden}
.s p{padding-bottom:5px;}
.s1{width:600px; height:150px; padding:10px 0; margin:10px 0; border:1px solid #ccc; overflow:hidden;}

.wrap{ width:1000em;}
.wrap div{ float:left}
</style>
<script type="text/javascript" src="../js/min/base-min.js"></script>
<script type="text/javascript" src="../js/min/Scroll-min.js"></script>
</head>

<body>
<div class="effect clearfix" id="e3">
    <pre>调用方法：new Scroll("scroll1", "scroll2");
    </pre>
	<div class="s">
		<div id="scroll1">
			<p>111111111&nbsp;&nbsp;111111111
			222222222&nbsp;&nbsp;222222222
			333333333&nbsp;&nbsp;333333333</p>
			<p>444444444&nbsp;&nbsp;444444444
			555555555&nbsp;&nbsp;555555555
			666666666&nbsp;&nbsp;666666666</p>
		</div>
		<div id="scroll2"></div>
	</div>
	<div><button onclick="toUp(s1)">Up</button> <button onclick="toDown(s1)">Down</button></div>
	
    <pre>


调用方法：new Scroll("scroll3", "scroll4", {dir:"Right",speed:1});
    </pre>
	<div class="s1">
		<div class="wrap">
			<div id="scroll3">
				<img src="../img/1.jpg"/><img src="../img/2.jpg"/><img src="../img/3.jpg"/><img src="../img/4.jpg"/>
			</div>
			<div id="scroll4"></div>
		</div>
	</div>
	<div><button onclick="toLeft(s2)">Left</button> <button onclick="toRight(s2)">Right</button></div>
    
    <pre>


调用方法：new Scroll("scroll5", "scroll6", {dir:"Right",speed:1,step:5,hand:true,stopSize:150,pause:true});
    </pre>
    <div class="s1">
		<div class="wrap">
			<div id="scroll5">
				<img src="../img/1.jpg"/><img src="../img/2.jpg"/><img src="../img/3.jpg"/><img src="../img/4.jpg"/>
			</div>
			<div id="scroll6"></div>
		</div>
	</div>
	<div><button onclick="toLeft(s3)">Left</button> <button onclick="toRight(s3)">Right</button></div>
</div>
</body>
<script>
function toUp(o){
	o.option.dir = "Up";
	o.run();
}

function toDown(o){
	o.option.dir = "Down";
	o.run();
}

function toLeft(o){
	o.option.dir = "Left";
	o.run();
}

function toRight(o){
	o.option.dir = "Right";
	o.run();
}
window.onload = function(){
	s1 = new Scroll("scroll1", "scroll2");
	s2 = new Scroll("scroll3", "scroll4", {dir:"Right",speed:1});
	s3 = new Scroll("scroll5", "scroll6", {dir:"Right",speed:1,step:5,hand:true,stopSize:150,pause:true});
}
</script>
</body>
</html>
